/**
 * 场布图插件
 */
import React, { useState, useRef } from 'react';

import './index.less';

export interface pointItem {
  [key: string]: any;
  point_name: string;
  point_color: CSSStyleDeclaration['color'];
  point_top: number;
  point_left: number;
  point_title: string;
}

function fliter(min: number, max: number, current: number): number {
  /** 超出范围的处理 */
  if (current < min) return min;
  if (current > max) return max;
  if (current > min && current < max) return current;
  return 0;
}

export default (
  props: {
    img: string;
    imgHeight: number;
    imgWidth: number;
    pointList: pointItem[];
    /** @pointerR 点半径 */ pointerR?: number;
    pointerFontColor?: string;
    /** @pointerR 编辑状态 */ isEdit?: boolean;
  } & React.AllHTMLAttributes<HTMLDivElement>
): JSX.Element => {
  const {
    img,
    imgHeight,
    imgWidth,
    pointList,
    pointerR = 20,
    pointerFontColor = '#fff',
    isEdit = true,
    ...otherProps
  } = props;
  const [list, setList] = useState<pointItem[]>(pointList);
  const [currentClickLayer, setCurrentClickLayer] = useState({
    // 点击位置在点内部的位置
    layerX: 0,
    layerY: 0,
  });

  const getBoxSizeRef = useRef<HTMLDivElement>(null);
  return (
    <div
      {...otherProps}
      style={{ ...otherProps.style }}
      ref={getBoxSizeRef}
      className="box"
    >
      {list.map((item) => (
        <span
          draggable={isEdit}
          onMouseDown={(e) =>
            setCurrentClickLayer({
              // @ts-ignore
              layerX: e.nativeEvent.layerX,
              // @ts-ignore
              layerY: e.nativeEvent.layerY,
            })
          }
          onDragEnd={(e) => {
            setList(
              list.map((items) => {
                if (item.id === items.id) {
                  return {
                    ...items,
                    point_top: fliter(
                      0,
                      imgHeight - pointerR * 2 - 2,
                      items.point_top +
                        e.nativeEvent.offsetY -
                        currentClickLayer.layerY
                    ),
                    point_left: fliter(
                      0,
                      imgWidth - pointerR * 2 - 2,
                      items.point_left +
                        e.nativeEvent.offsetX -
                        currentClickLayer.layerX
                    ),
                  };
                } else {
                  return items;
                }
              })
            );
          }}
          className="box_pointer"
          style={{
            height: pointerR * 2 + 'px',
            width: pointerR * 2 + 'px',
            top: item.point_top + 'px',
            left: item.point_left + 'px',
            background: item.point_color,
            lineHeight: pointerR * 2 + 'px',
            color: pointerFontColor,
            cursor: isEdit ? 'pointer' : 'default',
          }}
          key={item.id}
          title={item.point_title}
        >
          {item.point_name}
        </span>
      ))}
    </div>
  );
};
